﻿<%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
        <%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
            <c:set var="ctx" value="${pageContext.request.contextPath}" />
            <html>

            <head>
                <link rel="stylesheet" href="${ctx}/common/common.css">
                <title>Title</title>
                <link rel="stylesheet" href="${ctx}/common/plugins/layuiadmin/layui/css/layui.css" media="all">
                <link rel="stylesheet" href="${ctx}/common/plugins/layuiadmin/style/admin.css" media="all">
                <script src="${ctx}/common/plugins/layuiadmin/layui/layui.js"></script>

                <script src="${ctx}/common/plugins/jquery-1.10.2.min.js"></script>
            </head>

            <body>
                <form class="layui-form" action="${ctx}/account/saveAccount">
                    <input type="hidden" name="id" value="${account.id}" />
                    <div class="layui-form-item layui-col-md5" style="margin-top: 50px">
                        <label class="layui-form-label">登录账号<span style="color: red">*</span></label>
                        <div class="layui-input-block">
                            <input type="text" name="loginName" value="${account.loginName}" lay-verify="isRepeat"
                                ${!empty look ?"disabled":"" } ${!empty
                                look?"":"placeholder='请输入登录账号'"}   autocomplete=" on" class="layui-input">
                        </div>
                    </div>
                    <c:if test="${empty account && empty look}">
                        <%--添加的时候才显示密码--%>
                            <div class="layui-form-item layui-col-md5">
                                <label class="layui-form-label">登录密码<span style="color: red">*</span></label>
                                <div class="layui-input-block">
                                    <input type="text" name="password" value="${account.password}" lay-verify="required"
                                        ${!empty look ?"disabled":""} ${!empty
                                        look?"":"placeholder='请输入登录密码'"}  autocomplete=" off" class="layui-input">
                                </div>
                            </div>

                    </c:if>
                    <div class="layui-form-item layui-col-md5">
                        <label class="layui-form-label">人员姓名<span style="color: red">*</span></label>
                        <div class="layui-input-block">
                            <input type="hidden" name="tPId" id="tPId" value="${account.tPId}" lay-verify="required"
                                placeholder="请选择账号人员" autocomplete="off" class="layui-input">
                            <input readonly id="person" lay-type="showPerson" value="${personnel.name}" ${!empty look
                                ?"disabled":""} lay-verify="required" ${!empty
                                look?"":"placeholder='请选择账号人员'"}   autocomplete=" off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item layui-col-md5">
                        <label class="layui-form-label">角色<span style="color: red">*</span></label>
                        <div class="layui-input-block">
                            <c:if test="${empty myRoles}">
                                <c:forEach items="${roles}" var="role">
                                    <input type="checkbox" ${!empty look?"disabled":""} name="roles"
                                        title="${role.name}" value="${role.id}">
                                </c:forEach>
                            </c:if>
                            <c:if test="${!empty myRoles}">
                                <c:forEach items="${roles}" var="role">
                                    <input type="checkbox" name="roles" ${!empty look?"disabled":""}
                                        title="${role.name}" value="${role.id}">
                                </c:forEach>
                                <c:forEach items="${myRoles}" var="myRole">
                                    <input type="checkbox" name="roles" ${!empty look?"disabled":""} checked
                                        title="${myRole.name}" value="${myRole.id}">
                                </c:forEach>
                            </c:if>
                        </div>
                    </div>

                    <c:if test="${!empty look}">
                        <%--查看的时候显示--%>
                            <div class="layui-form-item layui-col-md5">
                                <label class="layui-form-label">创建时间</label>
                                <div class="layui-input-block">
                                    <input type="text" disabled
                                        value="<fmt:formatDate value='${account.createTime}' pattern=" yyyy-MM-dd" />"
                                    autocomplete="off"
                                    class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item layui-col-md5">
                                <label class="layui-form-label">创建人</label>
                                <div class="layui-input-block">
                                    <input type="text" disabled value="${account.creatorName}" autocomplete="off"
                                        class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <div class="layui-input-block">
                                    <button type="button" id="rollback" class="layui-btn layui-btn-primary">返回</button>
                                </div>
                            </div>
                            <script>
                                document.getElementById("rollback").addEventListener("click", function () {
                                    window.history.back();
                                })
                            </script>
                    </c:if>
                    <c:if test="${empty look}">

                        <div class="layui-form-item">
                            <div class="layui-input-block">
                                <button class="layui-btn" id="formBtn" lay-submit lay-filter="formDemo">提交</button>
                                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                                <button type="button" id="rollback1" class="layui-btn layui-btn-primary">返回</button>
                            </div>
                        </div>
                    </c:if>
                    <div style="display: none" id="personDiv">
                        <table class="layui-table" id="personReload"
                            lay-data="{ url:'${ctx}/account/queryEntPerson', page:true,groups:5,width:550}"
                            lay-filter="demo">
                            <thead>
                                <tr>
                                    <th lay-data="{templet:'#radioTpl',width:50}">选择</th>
                                    <th lay-data="{field:'name', sort:true}">人员名称</th>
                                    <th lay-data="{field:'phone', sort:true ,templet:'#createTime'}">联系电话</th>
                                </tr>
                            </thead>
                        </table>
                    </div>

                </form>
                <script type="text/html" id="radioTpl">
    <input type="radio" name="sex"   value="{{d.id}}" data-personName="{{d.name}}" lay-filter="radiodemo">
</script>
                <script>

                    //Demo
                    var form = null;
                    var $;
                    layui.use('form', function () {
                        $ = layui.$;
                        form = layui.form;

                        //监听提交
                        form.on('submit(formDemo)', function (data) {
                            var roles = $("input[name='roles']");
                            var nengtijiao = false;
                            for (var i = 0; i < roles.length; i++) {
                                if (roles[i].checked == true) {
                                    nengtijiao = true;
                                }
                            }
                            if (nengtijiao == false) {
                                layer.alert("请选择人员角色!");
                                return false;
                            }
                            layer.load(1, {
                                shade: [0.1, '#fff'] //0.1透明度的白色背景
                            });
                            // return false;
                        });
                        form.on("radio(radiodemo)", function (obj) {
                            $("#tPId").val(this.value);
                            $("#person").val($(this).attr("data-personName"));

                        });
                        form.verify({
                            isRepeat: function (value, item) { //value：表单的值、item：表单的DOM对象
                                if (value.trim().length <= 0) {
                                    return "账号是必填项";
                                }
                                if (${empty account }){
                            var isSubmit = true;
                            $.ajax({
                                url: "${ctx}/account/queryAccountRepeat",
                                data: { loginName: value }, //请求的附加参数，用json对象
                                method: 'POST',
                                async: false,
                                success: function (res) {
                                    if (res > 0) {
                                        isSubmit = false;
                                    }
                                }
                            });
                            if (isSubmit == false) {
                                return "账号已经被注册";
                            }
                        }
                    }
        });




    });

                    layui.use('laydate', function () {
                        var laydate = layui.laydate;
                        //执行一个laydate实例
                        laydate.render({
                            elem: '#entry_time' //指定元素
                            , type: 'datetime'
                        });
                        laydate.render({
                            elem: '#over_time' //指定元素
                            , type: 'datetime'
                        });
                    });

                    var open;
                    document.getElementById("person").addEventListener("click", function () {
                        open = layer.open({
                            type: 1,
                            skin: 'layui-layer-rim', //加上边框
                            area: ['550', '80%'], //宽高
                            content: $("#personDiv").html()
                        });
                        form.render();
                    })


                    layui.use('table', function () {
                        var table = layui.table;
                        var $ = layui.$, active = {};

                    });
                    document.getElementById("rollback1").addEventListener("click", function () {
                        window.history.back();
                    })

                </script>
            </body>

            </html>